/*Reset begin*/

* {
    margin: 0;
    padding: 0;
    font-family: 微软雅黑, PingFangSC-Light;
}

fieldset,
img,
input,
button {
    border: none;
    padding: 0;
    margin: 0;
    outline-style: none;
}

img {
    border: 0;
    vertical-align: middle;
}

ul,
li {
    list-style: none;
}

a {
    text-decoration: none;
    cursor: pointer;
}


/*Reset end*/
body,
html {
    width: 100%;
    height: 100%;
    background: url('../images/true.png') no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
}
/*header begin*/

.header {
    width: 100%;
    height: 90px;
    padding: 0 20px;
    min-width: 1280px;
    background: url(../images/title.png) no-repeat;
    background-size: 100% 100%;
}

.header>.header_logo>a>img {
    width: 260px;
}

.header>.header_nav {
    margin-left: 20px;
}

.header>.header_nav>ul>li {
    float: left;
    margin-right: 6px;
    position: relative;
}

.header>.header_nav>ul>li>a {
    display: block;
    height: 80px;
    padding: 0 10px 0 30px;
    line-height: 80px;
    color: #fff;
}

.header>.header_nav>ul>li>a:hover {
    border-bottom: 4px solid #4b8df8;
}

.header>.header_nav>ul>li>img {
    float: left;
    position: absolute;
    top: 33px;
    left: 10px;
}

.header .t_title {
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 2.5em;
    color: #fff;
}


/*header end*/

.data_content {
    min-width: 1280px;
    padding-top: 20px;
    width: 100%;
    position: relative;
}

.data_content .main_left {
    width: 20%;
    color: white;
}

.data_content .main_left>div {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #2C58A6;
    position: relative;
    box-shadow: 0 0 10px #2C58A6;
}

.data_content .main_left div .main_title {
    height: 35px;
    line-height: 33px;
    background-color: #2C58A6;
    border-radius: 18px;
    position: absolute;
    top: -17px;
    left: 50%;
    margin-left: -90px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    box-sizing: border-box;
    padding-left: 45px;
    z-index: 1000;
    padding-right: 30px;
}

.data_content .main_left div .main_title img {
    position: absolute;
    top: 8px;
    left: 20px;
}

.data_content .main_center {
    width: 60%;
    height: 610px;
}

.data_content .center_text {
    width: calc(100% - 50px);
    margin-left: 25px;
    margin-right: 25px;
    box-sizing: border-box;
    border: 1px solid #2C58A6;
    box-shadow: 0px 0px 6px #2C58A6;
    position: relative;
}

.main_center .main_title {
    height: 35px;
    line-height: 33px;
    background-color: #2C58A6;
    border-radius: 18px;
    position: absolute;
    top: -17px;
    left: 50%;
    margin-left: -90px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    box-sizing: border-box;
    padding-left: 45px;
    z-index: 1000;
    padding-right: 30px;
}

.main_center .main_title img {
    position: absolute;
    top: 8px;
    left: 20px;
}

.main_right {
    width: 20%;
}

.main_right>div {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #2C58A6;
    position: relative;
    box-shadow: 0 0 10px #2C58A6;
    display: inline-block;
}

.main_right div:nth-child(1) {
    margin-bottom: 30px;
}

.main_right div .main_title {
    height: 35px;
    line-height: 33px;
    background-color: #2C58A6;
    border-radius: 18px;
    position: absolute;
    top: -17px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    box-sizing: border-box;
    padding-left: 45px;
    padding-right: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main_right div .main_title img {
    position: absolute;
    top: 8px;
    left: 20px;
}



.data_bottom {
    width: calc(100% - 40px);
    height: 280px;
    margin-left: 20px;
}

.data_bottom .bottom_center {
    width: 52%;
    height: 280px;
}

.data_bottom div .main_title {
    height: 35px;
    line-height: 33px;
    background-color: #2C58A6;
    border-radius: 18px;
    position: absolute;
    top: -17px;
    left: 50%;
    margin-left: -110px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    box-sizing: border-box;
    padding-left: 45px;
    padding-right: 30px;
}

.data_bottom div .main_title img {
    position: absolute;
    top: 8px;
    left: 20px;
}


/*边角线*/

.t_line_box {
    position: absolute;
    width: 100%;
    height: 100%;
}

.t_line_box i {
    background-color: #4788fb;
    box-shadow: 0px 0px 10px #4788fb;
    position: absolute;
}

.l_t_line,
.t_r_line,
.l_b_line,
.r_b_line {
    width: 5px;
    height: 24px;
}

.t_l_line,
.r_t_line,
.b_l_line,
.b_r_line {
    width: 24px;
    height: 5px;
}


/*左上*/

.l_t_line {
    left: -3px;
    top: -3px;
}

.t_l_line {
    left: -3px;
    top: -3px;
}


/*右上*/

.t_r_line {
    right: -3px;
    top: -3px;
}

.r_t_line {
    right: -3px;
    top: -3px;
}


/*右下*/

.l_b_line {
    left: -3px;
    bottom: -3px;
}

.b_l_line {
    left: -3px;
    bottom: -3px;
}


/*左下*/

.r_b_line {
    right: -3px;
    bottom: -3px;
}

.b_r_line {
    right: -3px;
    bottom: -3px;
}

.text-content {
    color: white;
    margin-left: 20px;
    margin-bottom: 20px;
    height: 40px;
    font-size: 0.8rem;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

/*content 开始*/

.echart-map{
    height: 100%;
    width: 100%;
}
.chart {
    width: 100%;
    height: 100%;
}

.content {
    margin: 20px;
    width: calc(100% - 40px);
    min-width: 1280px;
}

.content>.content_title {
    width: 100%;
    height: 35px;
    line-height: 35px;
    background-color: #4b8df8;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.content>.content_title>p {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.content>.content_title>img {
    margin: 10px 10px 0px 10px;
}

.content>.content_main {
    min-width: 1280px;
}

.map-img {
    width: 100%;
    height: 100%;
    padding: 10px;
    padding-top: 28px;
}

.main2 {
    width: 76% !important;
}


/*
*图示
*/

.exponent {
    color: white;
    margin: 0 20px 20px 20px;
    padding: 5px 0;
}

.exponent ul,
.legs ul {
    display: flex;
    font-size: 12px;
    justify-content: center;
}

.exponent li,
.legs li {
    flex: 1 0 0;
    text-align: center;
    position: relative;
}

.exponent .lagend,
.legs .lagend {
    height: 8px;
    width: 100%;
    display: block;
}

.lagend1 {
    background-color: #00e400;
}

.lagend2 {
    background-color: #ffff00;
}

.lagend3 {
    background-color: #ff7e00;
}

.lagend4 {
    background-color: #ff0000;
}

.lagend5 {
    background-color: #99004c;
}

.lagend6 {
    background-color: #7e0023;
}

.exponent .left {
    position: absolute;
    left: -5px;
    top: 0；
}

.exponent .right {
    position: absolute;
    right: -5px;
    top: 0；
}


/*
*描述信息
*/

.main_des {
    margin-top: 24px;
    margin: 20px auto 0 auto;
    width: 96%;
}

.main_des .title {
    height: 32px;
    line-height: 32px;
    border-bottom: 1px solid white;
    text-align: center;
    margin-bottom: 10px;
}

.main_exponent {
    display: flex;
}

.main_exponent .num {
    font-size: 46px;
}

.main_exponent .num-warp {
    flex-grow: 1;
    margin-left: 28px;
}

.main_exponent .icon-warp {
    flex-grow: 1;
    height: 120px;
    margin-right: 20px;
}

.main_exponent .icon-warp img {
    height: 100%
}

.left_1 {
    margin-bottom: 30px;
}

.time {
    font-size: 20px;
    margin-top: 2px;
    position: relative;
}

/*警报*/
.ticker-wrapper {
    color: white;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 50px;
    /* line-height: 50px; */
    font-size: 1.5rem;
    width: 100%;
    overflow: hidden;
    z-index: 2;
    margin-top: -50px;
}

.ticker-wrapper .ticker-content {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    font-size: 3rem;
    font-weight: 700;
    color: rgb(255, 126, 0);
}

.modal {
    margin: 0 auto;
    width: 800px;
}

.btn-back {
    position: absolute;
    top: 18px;
    left: 20px;
    width: 100px;
}

.btn-info {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 100px;
}


/*
页面容器
*/

.content-varp {
    min-height: 100%;
    width: 100%;
    padding-bottom: 45px;
}


/*
图片地图
*/

.imga-map {
    height: 800px;
    width: 100%;
    position: relative;
}

.map-tag {
    position: absolute;
    color: #2981CA;
    font-size: 40px;
    animation: Beat 1.8s infinite;
    transition: all .5s;
    cursor: pointer;
}

@-webkit-keyframes Beat {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(20px);
    }
}

@keyframes Beat {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(20px);
    }
}

.table-warp{
    padding: 5px;
    padding-top: 15px;
    color: white;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
}
.table-warp table> tbody > tr:nth-of-type(odd){
        background-color:inherit;  
}

.table-warp table> thead > tr > th{
    border-bottom: 1px solid #ddd;
}
.table-warp table> tbody > tr > td{
    border-top:inherit;
}
.table-warp table a{
    color: white;
}


.table-content {
    width: 98%;
    padding: 20px;
    margin: 40px 10px;
    background: #fff;
    position: relative;
    height: 750px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.class-content {
    width: 98%;
    padding: 20px;
    margin: 40px auto;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.room {
    background-color: #4b8df8;
    padding: 8px 10px;
    margin: 5px 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    padding-bottom: 15px;
    width: 20%;
    cursor: pointer;
}

.r_activ {
    background-image: linear-gradient(#00BCD4, #3F51B5) !important;
    color: white;
}

.num-desc {
    font-size: 12px;
    position: relative;
}

[v-cloak] {
    display: none;
}


/*所有容器*/

.r-content {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
}


/*天气*/

#weather {
    /* height: 40px; */
}


/*图例容器*/

.leg-content {
    margin-top: 25px;
    color: white;
    width: 400px;
    margin-left: 10px;
    margin-right: 50px;
    border: 1px solid;
    margin-bottom: -15px;
}

.legs {
    padding: 5px 0;
    margin-bottom: 30px;
}


/*图例标题*/

.leg-title {
    font-size: 2rem;
    padding-bottom: 10px;
    border-bottom: 1px solid;
    margin-bottom: 10px !important;
}


/*室内空气指标颜色*/

.leg1 {
    background-color: #8DC120;
}

.leg2 {
    background-color: #E8BE2C;
}

.leg3 {
    background-color: #EF8724;
}

.leg4 {
    background-color: #BF1229;
}

.leg5 {
    background-color: #5C1E82;
}

@keyframes fade {
    from {
        opacity: 1.0;
    }
    50% {
        opacity: 0.4;
    }
    to {
        opacity: 1.0;
    }
}

@-webkit-keyframes fade {
    from {
        opacity: 1.0;
    }
    50% {
        opacity: 0.4;
    }
    to {
        opacity: 1.0;
    }
}


/*警告图标*/

.iconfont.w-icon {
    margin-left: 60px;
    position: absolute;
    color: #EF8724;
    font-size: 40px;
    margin-top: -21px;
    animation: fade 600ms infinite;
    -webkit-animation: fade 600ms infinite;
}


/*iconfont 字体*/

@font-face {
    font-family: "iconfont";
    src: url('./fonts/iconfont.eot?t=1590481412954');
    /* IE9 */
    src: url('./fonts/iconfont.eot?t=1590481412954#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANYAAsAAAAAB2AAAAMKAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqCYIIxATYCJAMICwYABCAFhG0HORtgBhEVlItkXx3YxtyGvnHQZbRMJI/wrRsmv6kUY4P7PXj45rI/yex2Fhjk1R0hKVSUHgAqwPSdItutrz1mRzqrU3tYCDIgvbDiK9/jOU7S68r1nvgYHkIDcACuAQIIxEZlVkUI5+CQ9P8cM12UYH5fOGU27Q1wPKABdWMf2R3IHRjfMHYTQUO8DgE4yWoTo8dOno1CAuYJQGzesG4FKqNBNuQLFAJ7xVaJOI0NpR3RBkg4xX9e/KZNgYZNBxRNXztmNcO/CZikG5ZhMUXAnc4EGLtAB9pAgphdaZmKHkXadJxeRFLEtvIFfBOWRTmb/ccDAcIOyHUDkJY518TFvEv9Sw0ACShgC7BvUDEory/qdnvAK+b5jt2/cjnsvWhevRbzbXz6lGbcc7qPmkJ//tzs8/crLkJ75fbd2LxLptMZvnrn1tzOBOdRRC8rQd9LuhZbGRlyQXfeig69WHrU3RVGePD5o2ZPbNilY3NvRzDMVWZU9PT2hQ2P3/GnX4ce1zFs2VKxe5dY1u0pegxvwNstlqXXjbw8bNuerH9iZcyidTt3bDJQQcR6jVUeUpLHn9D6H3RUdsKaasxnHlbBnksDytAnjsOpw+blRDFxxIyGfdLxpUZ5xHV/Wt4RYDgA1lN9h976Db+DZ+zD/8t8g/8rlwTg1Z+/4y7rqaSbDdTJWgW8dG7HDunzgVaTLrcyobEFdTN1TpyAheoIejdUEbnDhEARuU9bF5kEdBRlpMS2wYaLQWBHMQyctIz63S4hLCfmAJreEgh+H9B49YHO74uU2B/YRP3Bzl8OTnMLHelSbVCjGLWgA/OCwdLqkV6UyD9iuM2a03xOvCLvgx+ass7He1yRp1ix30Mr4sEzLXCQbsN5JtiYRrRSRpGtqypf9UWlpSVRRmFIE8gBxgsYWGTlaW+hCt9/hIKbmcYNbT3mK8R2w+CgUao7IHvJ2qntVu7Z3QUtITzgMbIAB8mEZhghYKueNEKWKMUBoU2nUrr5rpJyednydvsAJ6DUgmN0fNc0DmvArNhcJAkAAA==') format('woff2'), url('./fonts/iconfont.woff?t=1590481412954') format('woff'), url('./fonts/iconfont.ttf?t=1590481412954') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('./fonts/iconfont.svg?t=1590481412954#iconfont') format('svg');
    /* iOS 4.1- */
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-alert:before {
    content: "\e601";
}

#chartDevice {
    padding-top: 20px;
}

#quality {
    color: black;
    position: absolute;
    top: -12px;
    font-size: 16px;
    margin-left: 10px;
    padding: 5px 10px;
}


/***********************************smart**********************************/


/*设备信息*/

.equipment {}


/*数据总览*/

.overview {
    margin-top: 20px;
}

.overview .item-content {
    padding: 15px;
}

.overview .item {
    width: 33.33%;
    float: left;
    text-align: center;
}

.overview .item h4 {
    font-size: 40px;
    font-weight: bold;
}

.overview .item span {
    position: relative;
    padding-left: 18px;
}

.overview .item span::before {
    position: absolute;
    left: 0;
    top: 5px;
    content: "";
    width: 10px;
    height: 10px;
    background-color: rebeccapurple;
}


/*通告*/

.notice {
    margin-top: 20px;
    height: 342px;
}

.notice-header {
    background-color: rgba(255, 255, 255, .1);
    height: 42px;
}

.notice-header h4 {
    float: left;
    text-align: center;
    font-size: 16px;
}

.notice-body {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.notice-body>div {
    position: absolute;
    width: 100%;
}

.notice-body span {
    display: inline-block;
    text-align: center;
    height: 40px;
    line-height: 40px;
}

.notice-header h4:nth-child(3),
.notice-body span:nth-child(3) {
    width: 18%;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
}

.notice-header h4:nth-child(1),
.notice-body span:nth-child(1),
.notice-header h4:nth-child(2),
.notice-body span:nth-child(2) {
    width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}


/*24 小时用电*/

.ele24 {
    margin-bottom: 20px !important;
}


/*数据面板*/

.data-panel {}

.data-panel-content div {
    float: left;
    width: 50%;
    margin-bottom: 0 !important;
    height: 240px;
}